<template>
  <div>
    <div>我是A，我负责创建对象</div>
    <a-input v-model:value="context"></a-input>
    <a-divider></a-divider>
    <B></B>
  </div>
</template>

<script>
import { myInjectionKey } from "../../../../components/keys";
import { computed } from "vue";
import B from "./BVue.vue";
export default {
  components: {
    B,
  },
  data() {
    return {
      messageB: "我是data中的值",
      context: "我是动态的值",
    };
  },
  // provide: {
  //   messageA: "我是固定值",
  // },
  /**
   * 使用函数的方式可以访问到data
   */
  provide() {
    return {
      messageA: "我是固定值",
      messageB: this.messageB,
      user: { name: "Jack" },
      context: computed(() => this.context),
      /**
       * Symbol值作为对象的属性名时不能使用点运算符，同理，在 ****对象的内部**** 使用Symbol值时也必须放在方括号中
       */
      [myInjectionKey]: {
        name: 1233,
      },
    };
  },
};
</script>

<style></style>
